import React,{useState,useEffect,useRef} from "react";
import LlxTable from 'components/LlxTable'
import LlxForm from 'components/LlxForm/index'
import { Form,Button,Select,Cascader,Tag,Modal,DatePicker,Alert} from 'antd';

import { Tooltip,Image} from 'antd';

import {getPublishedBookList,getWordList} from 'api/index'
import classNames from "classnames";
const { RangePicker } = DatePicker;


const { SHOW_CHILD } = Cascader;
const {Option} = Select

function AddBookFullDialog(props) {
  const {isModalVisible, setIsModalVisible,dictionaries,title,userName,multipleType} = props

  const [form] = Form.useForm();//新增学习视频
  
  const [loading,setLoading] = useState(false)
  const [total,setTotal] = useState(0)

  useEffect(()=>{
     getNewList()
  },[])// eslint-disable-line react-hooks/exhaustive-deps

  let columns = [
         {title: '名称',fixed:'left',width:250, dataIndex: 'bookName',key: 'bookName', align: 'center'},
         {title: '封面', dataIndex: 'pictureUrl',key: 'pictureUrl', align: 'center',render:(text)=>{
      return  <div>
        {
          text?<Image
          width={50}
          src={text}
        />:''
        }
      </div>
         }},
         {title: '适合年纪', dataIndex: 'ageName',key: 'ageName', align: 'center'},
         {title: '主题', dataIndex: 'themes',key: 'themes', align: 'center', render: (text, record) => {
      return <div className="operate_link_group text-nowrap">
       {record.themes?.map((i,j)=>{
         return   <Tooltip key={i.id} placement="top" title={text.map(i=>i.themeName).join(' ')}>
          {
            j<3?<Tag key={i.id} color="lime">{i.themeName}</Tag>:''
          }
           </Tooltip>
       })}
     </div>}
         },
         {title: '系列', dataIndex: 'serialName',key: 'serialName', align: 'center'},
         {title: '标签', dataIndex: 'labels', key: 'labels',align: 'center', render: (text, record) => {
     return <div className="operate_link_group text-nowrap">
      {record.labels?.map((i,j)=>{
        return   <Tooltip key={i.id} placement="top" title={text.map(i=>i.labelName).join(' ')}>
         {
           j<3?<Tag key={i.id} color="green">{i.labelName}</Tag>:''
         }
          </Tooltip>
      })}
    </div>
       }},
         {title: '创建人',dataIndex: 'createBy', key: 'createBy', align: 'center',render: (text, record) => {
      return <div className={classNames(userName===text?'operate_link_group text-nowrap text-color-red':"operate_link_group text-nowrap")}>
        {text}
     </div>
        }},
       {title: '更新人',dataIndex: 'updateBy', key: 'updateBy', align: 'center',render: (text, record) => {
         return  <div className={classNames(userName===text?'operate_link_group text-nowrap text-color-red':"operate_link_group text-nowrap")}>
         {text}
       </div>
       }},
       {title: '更新时间', dataIndex: 'updateTime', key: 'updateTime', align: 'center'},
    {title: '操作',fixed:'right', dataIndex: 'operate', key: 'operate', align: 'center',width:100,render:(text, record)=>{
      return  <div className="text-link" onClick={()=>selectBook(record.id)}>
       选择此泛读书
     </div>
    }}
  ]
   
  // 判断单选还是多选去掉操作一栏
  if(multipleType){
    columns = columns.filter(i=>i.title!=='操作')
  }

  //分页数据
  const [pagination,setPagination] = useState({
    current:1,
    pageSize:10
  })

  //初始表格数据
  const [dataSource,setDataSource] = useState([])

  const [wordOptions,setWordOptions] = useState([])

  const options = wordOptions.map(d => <Option value={d.wordName} key={d.id}>{d.wordName}</Option>);

  const handleSearch = async value => {
    const res = await getWordList({currPage:1,pageSize:20,wordName:value})
    setWordOptions(res.result.records)
  };
  
  // 新增表单
  const newItem = [
    {label: '名称',type:'input', name: 'bookName', span: 4 },
    {label: '标签', name: 'label' , span: 5,render: () => {
    return <Cascader  maxTagCount="responsive" showCheckedStrategy={SHOW_CHILD} fieldNames={{value:'id',label:'labelName'}} options={dictionaries.Label} multiple placeholder="请选择标签" />
     } },
     {label: '适合年纪', name: 'ageId' , span: 5,render: () => {
     return <Select
     allowClear
     optionFilterProp="dictValue"
     showSearch
     fieldNames={{value:'id',label:'dictValue'}}
     placeholder={'请选择适合年纪'}
     options={dictionaries.AgeRange}
   >
   </Select>
     } },
    {label: '主题', name: 'theme' , span: 5,render: () => {
      return <Select
      allowClear
      optionFilterProp="dictValue"
      showSearch
      maxTagCount={1}
      fieldNames={{value:'id',label:'dictValue'}}
      placeholder={'请选择主题'}
      mode="multiple"
      options={dictionaries.Theme}
    >
    </Select>
    } },
    {label: '出版社', name: 'publisher' , span: 5,render: () => {
    return <Select
      allowClear
      optionFilterProp="dictValue"
      showSearch
      fieldNames={{value:'dictValue',label:'dictValue'}}
      placeholder={'请选择类型'}
      options={dictionaries.Publisher}
    >
    </Select>
     } },
    {label: '泛读简介',type:'input', name: 'remark', span: 4 },
    {label: '配音', name: 'dub', span: 5 ,render:()=>{
  return <Select
  allowClear
  optionFilterProp="dictValue"
  showSearch
  maxTagCount={1}
  fieldNames={{value:'id',label:'dictValue'}}
  placeholder={'请选择配音'}
  options={dictionaries.isDub}
>
</Select>
    }},
    {label: '字幕类型', name: 'captionPositionId', span: 5 ,render:()=>{
     return <Select
     allowClear
     optionFilterProp="dictValue"
     showSearch
     maxTagCount={1}
     fieldNames={{value:'id',label:'dictValue'}}
     placeholder={'请选择字幕类型'}
     options={dictionaries.CaptionPosition}
   >
   </Select>
    }},
    {label: '类型', name: 'bookTypeId' , span: 5,render: () => {
      return <Select
     allowClear
     optionFilterProp="dictValue"
     showSearch
     fieldNames={{value:'id',label:'dictValue'}}
     placeholder={'请选择类型'}
     options={dictionaries.BookType}
   >
   </Select>
    } },
    {label: '分享', name: 'share' , span: 5,render: () => {
     return <Select
     allowClear
     optionFilterProp="dictValue"
     showSearch
     fieldNames={{value:'id',label:'dictValue'}}
     placeholder={'请选择分享'}
     options={dictionaries.shareOption}
   >
   </Select>
    } },
    {label: '系列', name: 'serialId' , span: 4,render: () => {
     return <Select
     allowClear
     optionFilterProp="dictValue"
     showSearch
     fieldNames={{value:'id',label:'dictValue'}}
     placeholder={'请选择系列'}
     options={dictionaries.SeriesName}
   >
   </Select>
    } },
    {label: '蓝思值', name: 'lexile' , span: 5,render: () => {
      return <Select
      allowClear
      fieldNames={{value:'id',label:'value'}}
      placeholder={'请选择蓝思值'}
      options={[{id:1,value:'0-100'},{id:2,'value':'100-200'},{id:3,'value':'200-300'},{id:4,'value':'300-400'},{id:5,'value':'400-500'},{id:6,'value':'500-600'},{id:7,'value':'600-700'},{id:8,'value':'700-800'},{id:9,'value':'800-900'},{id:10,'value':'900-1000'},{id:11,'value':'1000-1100'}]}
    >
    </Select>
     } },
    {label: '级别', name: 'levelId' , span: 5,render: () => {
     return <Select
     allowClear
     optionFilterProp="dictValue"
     showSearch
     fieldNames={{value:'id',label:'dictValue'}}
     placeholder={'请选择级别'}
     options={dictionaries.Level}
   >
   </Select>
    } },
    {label: '核心单词', name: 'coreWord' , span: 5,render: () => {
     return <Select
     placeholder={'请输入搜索单词'}
     defaultActiveFirstOption={false}
     showArrow={false}
     filterOption={false}
     mode="multiple"
     onSearch={handleSearch}
     notFoundContent={null}
   >
     {options}
   </Select>
    } },
    {label: '阅读模式', name: 'readModeId' , span: 5,render: () => {
     return <Select
     allowClear
     optionFilterProp="dictValue"
     showSearch
     fieldNames={{value:'id',label:'dictValue'}}
     placeholder={'请选择阅读模式'}
     options={dictionaries.ReadMode}
   >
   </Select>
    } },
    {label: '开页方式', name: 'pageId' , span: 4,render: () => {
     return <Select
     allowClear
     optionFilterProp="dictValue"
     showSearch
     fieldNames={{value:'id',label:'dictValue'}}
     placeholder={'请选择开页方式'}
     options={dictionaries.PageType}
   >
   </Select>
    } },
     {label: '创建人', name: 'createBy',  span: 5 ,render: () => {
       return <Select
       allowClear
       optionFilterProp="userName"
       showSearch
       fieldNames={{value:'userName',label:'userName'}}
       placeholder={'请选择创建人'}
    options={dictionaries.UserSpecies}
  >
  </Select>
    }},
      {label: '更新人', name: 'updateBy',  span: 5,render: () => {
      return <Select
      allowClear
      optionFilterProp="userName"
      showSearch
      fieldNames={{value:'userName',label:'userName'}}
    placeholder={'请选择更新人'}
    options={dictionaries.UserSpecies}
  >
  </Select>
    }},
     {label: '更新时间', name: 'updateTime', span: 5 ,render: () => {
    return  <RangePicker showTime onChange={getUpdateTime} style={{width:'100%'}}/>
    }}
    ]

  //选择数据
  const [selectedRowKeys,setselectedRowKeys] = useState([])
  const rowSelection  = useRef({
    selectedRowKeys: selectedRowKeys,
    onChange: value => {
    setselectedRowKeys(value)
    rowSelection.current.selectedRowKeys = value
    }
  })
 
  // 用户点击选择将数据返回
  const selectBook = (value) => {
    if(multipleType){
      // 多选
      props.returnBookId(selectedRowKeys)
    } else {
      // 单选
    console.log(value);
    }

  }
  
  // 获取数据
  const getNewList = async(value) => {
    setLoading(true)
    const params = JSON.parse(JSON.stringify(form.getFieldValue()))
    params.currPage=value&&value.pageSize?value.current:pagination.current
    params.pageSize=value&&value.pageSize?value.pageSize:pagination.pageSize
    params.labels = params.label?params.label.map(i=>{
      return {id:i[1]}
    }):[]
    params.themes = params.theme?params.theme.map(i=>{
      return {id:i}
    }):[]
    params.coreWords = params.coreWord?params.coreWord.join(' '):''
    params.upperLower = 1010
  
    if(params.lexile){
      params.startLexile = (params.lexile - 1) * 100
      params.endLexile = params.lexile * 100
      params.lexile=''
    }

    const res = await getPublishedBookList(params)

    setDataSource(res.result.records)

    setTotal(res.result.total)

    setLoading(false)
  }
  
  // 关闭
  const onCancel = () => {
    setIsModalVisible(false)
  }

    // 获取时间
  const getUpdateTime = (value,dataString) => {
  const data = form.getFieldValue()
  data.startTime=dataString[0]
  data.endTime=dataString[1]
  form.setFieldsValue(data)
  }
  
  
  return   <Modal  wrapClassName="modal-full"   visible={isModalVisible} footer={null} onCancel={onCancel}>
        
        <div className="full-modal-title">
          <Alert message={title} type="success" />
        </div>
       
       {/* 搜索表单加表格 */}
       <LlxForm form={form} labelCol={7} formItem={newItem} />

       <div style={{marginBottom:'10px'}}>
         <Button type={'primary'} onClick={getNewList}>查询</Button>
        {
           multipleType?<Button style={{marginLeft:'20px'}} type={'primary'} onClick={selectBook}>添加选中的泛读绘本</Button>:''
        }
       </div>

       {
         multipleType?<LlxTable
         loading={loading} 
         pagination={pagination}
         setPagination={setPagination}
         selectedRowShow={true}
         rowSelection={rowSelection.current}
         height={450}
         getNewList={getNewList}
         total={total}
         columns={columns}
         dataSource={dataSource}/>:<LlxTable
         loading={loading} 
         pagination={pagination}
         setPagination={setPagination}
         selectedRowShow={true}
         height={450}
         total={total}
         getNewList={getNewList}
         columns={columns}
         dataSource={dataSource}/>
       }
   </Modal>
}

export default AddBookFullDialog